{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}菜谱-学厨网{% endblock %}

{% block content %}
    <div class="container" style="margin-top: 70px;">
        <ol class="breadcrumb">
            <li><a href="{% url 'index' %}">首页</a></li>
            <li class="active">菜谱</li>
        </ol>
    </div>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="page-header" style="margin-top: 10px;">
                    <h4>分类</h4>
                </div>
                <ul class="nav nav-pills" role="tablist">
                    </li>
                    {% for menu_type in all_menu_type %}
                        <li role="presentation"><a href="{% url 'cookbook:cookbook_list_classify' menu_type.id %}">{{ menu_type.name }} <span class="badge">{% if menu_type.number %}{{ menu_type.number }}{% endif %}</span></a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class="container">

        <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
            <ul id="myTabs" class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab"
                                                          aria-controls="home" aria-expanded="true">最新发布</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">
                    <div class="row">
                        {% for menu in hot_menu %}
                        <div class="col-sm-6 col-md-3">
                            <div class="thumbnail">
                                <a href="{% url 'cookbook:cookbook_detail' menu.id %}"><img src="{{ MEDIA_URL }}{{ menu.image }}" alt="..."></a>
                                <div class="caption">
                                    <h3 class="text-center">{{ menu.name }}</h3>
                                    <h5 class="text-center"><a title="{{ menu.user }}" href="{% url 'cookbook:user_menu' menu.user_id %}" class="u">{{ menu.user }}</a>
                                    </h5>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                </div>
            </div>
        </div>
    </div>
{% endblock %}